<template>
  <ApiSelect :="$attrs" :data="data" :model-value="value" multiple :api="getAllDepartment" @update:model-value="onChange" />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { getAllDepartment } from '../api'
import ApiSelect from '@/components/form-item/ApiSelect.vue'

interface Props {
  modelValue: string;
  data: any;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  data: () => ({})
})

interface Emits {
  'update:model-value': [string]
}
const emit = defineEmits<Readonly<Emits>>()

const value = computed(() => {
  return props.modelValue ? props.modelValue.split(',') : []
})

const onChange = val => {
  const v = val ? val.join(',') : ''
  emit('update:model-value', v)
  props.data.departmentName = v
}
</script>
